<template>
	<view class="container">
		<view class="popup_box">
			<view class="popup_line">
				<input type="digit" :value="money" placeholder="0.00" 
				style="font-size: 50rpx;
				min-height: 100rpx; 
				height: 100rpx;
				width: 50%;"
				@input="onInput"
				@confirm="onConfirm"
				 />
				<image slot="icon" @click="clickImg()" class="photo_icon" :src="img" mode=""></image>
				
				<view v-show="img != empty_img">
					<view class="del-btn" @click="delImg()">
						<uni-icons :color="iconclear.color" :size="iconclear.size" :type="iconclear.type" />
					</view>
				</view>
			</view>
			
			<u-line :border-style="borderStyle" color="red" :color="color" :length="length" :direction="direction" :hair-line="hairLine"></u-line>
			
			<view class="popup_line">
				<image slot="icon" class="popup_icon" :src="iconList.add_bill_time" mode="" :lazy-load="lazy_load"></image>
				<text class="popup_type">日期</text>
				<view style="font-size: 28rpx;font-weight: 600;" @click="clickDate()">
					{{picker_time}}
					<u-icon name="arrow-right" class="u-icon-wrap u-cell__right-icon-wrap"></u-icon>
				</view>
			</view>
			<view class="popup_line">
				<image slot="icon" class="popup_icon" :src="iconList.add_bill_type" mode="" :lazy-load="lazy_load"></image>
				<text class="popup_type">分类</text>
				<view style="font-size: 25rpx;font-weight: 600;">
					{{data.bill_type}}
				</view>
			</view>
			
			<view class="popup_line">
				<image slot="icon" class="popup_icon" :src="iconList.add_bill_desc" mode="" :lazy-load="lazy_load"></image>
				<text class="popup_type">备注</text>
				<input type="text" :value="desc" @input="onDescInput" placeholder="添加备注" style="font-size: 28rpx;width: 70%;" />
			</view>
			
			<view style="display: flex; padding: 20rpx;">
				<view style="margin: auto;">
					<u-button 
					type="success" 
					size="medium" 
					:disabled="submitStatus" 
					@click="submit"
					
					>保存</u-button>
				</view>
				<view style="margin: auto;">
					<u-button 
					type="" 
					size="medium" 
					@click="deletSubmit"
					>删除</u-button>
				</view>
			</view>
		</view>
		<u-picker mode="time" v-model="picker_show" :params="picker_params" :default-time="picker_time" @confirm="pickerConfirm"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: [],
				picker_params: {
					year: false,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				picker_show: false,
				picker_time: "",
				month: "",
				day: "",
				
				money: 0,
				desc:"",
				
				empty_img: '../../static/empty-img.png',
				img: '',
				
				submitStatus: true,
				
				lazy_load:true,
				iconclear:{
					color : 'red',
					size: '20',
					type: 'clear'
				},
				
				direction: 'row',
				hairLine: true,
				length: '100%',
				color: "#d8d8d8",
				borderStyle: 'solid',
				iconList: {
					add_bill_time:'../../static/add_bill_time.png',
					add_bill_type:'../../static/add_bill_type.png',
					add_bill_desc:'../../static/add_bill_desc.png',
					user_bill:'../../static/user_bill.png',
					user_feedback:'../../static/user_feedback.png',
					user_kefu:'../../static/user_kefu.png',
					user_time:'../../static/user_time.png',
					user_type:'../../static/user_type.png'
				}
			}
		},
		methods: {
			onInput(e){
				let v = e.detail.value;
				v = v.replace(/^\D*([1-9]\d{0,6}\.?\d{0,2})?.*$/,'$1');
				this.money = v;
				if(v>0){
					this.submitStatus = false;
				}else{
					this.submitStatus = true;
				}
				return v;
			},
			clickDate(){
				this.picker_show = true;
			},
			pickerConfirm(e) {
				if (this.picker_params.month) this.month = e.month;
				if (this.picker_params.day) this.day = e.day;
				
				this.picker_time = this.month + "-" + this.day;
			},
			onDescInput(e){
				this.desc = e.detail.value;
			},
			clickImg(){
				if(this.img == this.empty_img){
					this.uploadImg();
				}else{
					this.previewImg();
				}
			},
			uploadImg(){
				let _this = this;
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (res) {
						console.log('选择相册后的文件列表：',JSON.stringify(res.tempFilePaths));
				    }
				});
			},
			delImg(){
				this.img = this.empty_img;
			},
			previewImg(){
				uni.previewImage({
					current : 0,
				    urls: [this.img],
				    longPressActions: {
						itemList: ['发送给朋友', '保存图片', '收藏'],
						success: function(data) {
							
						},
				        fail: function(err) {
				            
				        }
				    }
				});
			},
			initValue(){
				if(this.data['money'] > 0){
					this.submitStatus = false;
				}else{
					this.submitStatus = true;
				}
				
				if(this.data['img_url'] == ""){
					this.img = this.empty_img;
				}else{
					this.img = this.data['img_url'];
				}
				
				this.desc = this.data['desc'];
				this.money = this.data['money'];
				
				let t = this.data.time;
				let t_a = t.split("-");
				this.month = t_a[0] || "";
				this.day = t_a[1] || "";
				this.picker_time = this.month + "-" + this.day;
			},
			submit(){
				let _this = this;
				_this.submitStatus = true;
				
				setTimeout(() => {
					uni.navigateBack({
					    delta: 1
					});
				}, 500)
			},
			deletSubmit(){
				let _this = this;
				uni.showModal({
				    title: '提示',
				    content: '确定删除?',
				    success: function (res) {
				        if (res.confirm) {
				            _this.toDelete();
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			toDelete(){
				// 跳转
				setTimeout(() => {
					uni.navigateBack({
					    delta: 1
					});
				}, 500)
			}
		},
		onLoad() {
			uni.$once('detailData', (data) => {
			    console.log("详情页接收事件detailData成功,data=", data);
				this.data = data;
			});
			
			uni.$emit('newPageOpen',{
				'data':"1"
			})
			console.log('详情页新页面打开触发newPageOpen');
			
			this.initValue();
		},
		onShow(){
			
		}
	}
</script>

<style lang="scss" scoped>
	.popup_box{
		padding: 30rpx;
		
		.del-btn{
			position: absolute;
			top: 5rpx;
			left: 645rpx;
			z-index: 10;
			
			border-radius: 100rpx;
			width: 44rpx;
			height: 44rpx;
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
			-webkit-box-pack: center;
			-webkit-justify-content: center;
			justify-content: center;
		
		}
	}
	.popup_line{
		display: -webkit-box;
		display: -webkit-flex;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-webkit-flex-direction: row;
		flex-direction: row;
		-webkit-box-align: center;
		-webkit-align-items: center;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		width: 100%;
		padding: 26rpx 32rpx;
		font-size: 28rpx;
		line-height: 54rpx;
		color: #606266;
		background-color: #fff;
		text-align: left;
	}
	.popup_icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 30rpx;
	}
	.popup_type{
		font-size: 28rpx;
		padding-right: 30rpx;
	}
	.u-cell__right-icon-wrap {
		display: inline-flex;
		align-items: center;
		padding-left: 10rpx;
	}
	.photo_icon{
		width: 100rpx;
		height: 100rpx;
		margin-left: auto;
	}
</style>
